<template>
  <div class="app-container">
    <split-pane :default-percent="20" split="vertical">
      <template slot="paneL">
        <div class="table">
          <div class="inner">
            <el-tree
              class="flow-tree"
              style="height: 97%;"
              :data="data2"
              :props="defaultProps"
              node-key="dptId"
              default-expand-all
              highlight-current
              ref="tree"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
      </template>

      <template slot="paneR">
        <div class="app-containerA">
          <div class="formList">
            <el-form ref="fltForm" :inline="true" :model="flt" class="form">
              <!-- <el-row :gutter="7" class="row">
                <el-col :span="5"> -->
              <el-form-item label="用户账号:" prop="usrCode" size="mini">
                <el-input v-model="flt.usrCode" clearable maxlength="192" size="mini" style="width:200px"></el-input>
              </el-form-item>
              <!-- </el-col> -->
              <!-- <el-col :span="2"> -->
              <el-form-item size="mini">
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
              <!-- </el-col> -->
              <!-- </el-row> -->
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="btn">
                    <buttonName @clickEvent="clickEventDom"></buttonName>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="tableA">
            <div class="innerA" style="padding-left: 10px;" ref="innerA">
              <!-- <div class="btn"> -->
              <!-- <buttonName @clickEvent="clickEventDom"></buttonName> -->
              <!--                <el-button size="mini" type="primary" plain v-if="isAuth('add')" @click="addNew">新增</el-button>-->
              <!--                <el-button size="mini" type="primary" plain v-if="isAuth('edit')" @click="edit">编辑</el-button>-->
              <!--                <el-button size="mini" type="primary" plain v-if="isAuth('del')" @click="del">删除</el-button>-->
              <!--                <el-button plain size="mini" type="primary" v-if="isAuth('restPassword')" @click="resetpwd">密码重置</el-button>-->
              <!-- </div> -->
              <el-table
                :data="userdepartmentList"
                :header-cell-style="{ textAlign: 'center' }"
                :height="maxHeight"
                :highlight-current-row="true"
                border
                @row-click="rowClick"
                @row-dblclick="view"
              >
                <el-table-column align="center" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
                <el-table-column align="left" label="用户账号" prop="usrCode" show-overflow-tooltip sortable width="130"></el-table-column>
                <el-table-column align="left" label="用户名称" prop="usrName" show-overflow-tooltip sortable width="130"></el-table-column>
                <el-table-column align="left" label="集团/糖厂/货主" prop="usrDptsName" show-overflow-tooltip sortable width="175"></el-table-column>
                <el-table-column align="left" label="角色" prop="usrRlesName" show-overflow-tooltip sortable width="130"></el-table-column>
                <el-table-column align="left" label="联系电话" prop="usrCellphone" show-overflow-tooltip sortable width="130"></el-table-column>
                <el-table-column align="left" label="邮箱" prop="usrEmail" show-overflow-tooltip sortable width="130"></el-table-column>
                <el-table-column align="left" label="是否直接发布" prop="isDistribute" show-overflow-tooltip sortable width="175">
                  <template slot-scope="scope">
                    <span>{{ distribute[scope.row.isDistribute] }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" width="116" show-overflow-tooltip label="状态" prop="usrStatus" sortable>
                  <template slot-scope="scope">
                    <span>{{ USR_STATUS[scope.row.usrStatus] }}</span>
                  </template>
                </el-table-column>
                <!--<el-table-column align="center" label="是否同步" prop="isPaySync" show-overflow-tooltip sortable width="100" v-if="usrRole === '5'">-->
                <!--  <template slot-scope="scope">-->
                <!--    <span>{{ scope.row.isPaySync === 'Y' ? '是' : '否' }}</span>-->
                <!--  </template>-->
                <!--</el-table-column>-->
                <el-table-column align="left" width="100" show-overflow-tooltip label="备注" prop="remark" sortable></el-table-column>
              </el-table>
            </div>
          </div>
          <el-pagination
            ref="pagination"
            :current-page="Pagination.currentPage"
            :layout="Pagination.layout"
            :page-size="Pagination.pageSize"
            :page-sizes="Pagination.pageSizeList"
            :total="Pagination.total"
            background
            class="pagination"
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </template>
    </split-pane>

    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-if="showDialog" :visible.sync="showDialog" :title="operate">
      <v-dialog
        :show="show"
        :dialogmode="operate"
        :disabled="!isEditMode"
        @close="closeEdit"
        @save="saveFltInfo"
        :flt_info="currentFltInfo"
        :dataTree="data2"
        :options="options"
      >
      </v-dialog>
    </el-dialog>

    <!--修改密码-->
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="editPasswordDialogShow"
      title="修改密码"
      width="560px"
    >
      <el-form :model="editPassword" :rules="editPasswordRules" label-position="right" label-width="100px" size="mini">
        <el-form-item label="旧的密码：" prop="old">
          <el-input v-model="editPassword.old" maxlength="32" placeholder="请输入" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="new">
          <el-input v-model="editPassword.new" maxlength="32" placeholder="请输入" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认：" prop="newAgain">
          <el-input v-model="editPassword.newAgain" maxlength="32" placeholder="请输入" type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editPasswordDialogShow = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="doEditPassword">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VDialog from './dialog'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import paginationMixin from '@/mixins/pagination'
// import isAuth from '@/mixins/buttonAuth'
import {
  addusersysdepartmentList,
  checksysdepartmentList,
  checkusersysdepartmentList,
  delusersysdepartment,
  editPassword,
  editusersysdepartment,
  getzuzhiList,
  queryroles,
  resetSysUserpwd
} from '@/request/api'
import buttonName from '@/components/buttonName/button-name'
// import { setTimeout } from 'timers';

export default {
  name: 'router.groupUser',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    // 密码校验
    var reusrPassword = (rule, value, callback) => {
      // console.log(rule, value, callback)
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.FLT_INFO.usrPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      usrRole: localStorage.getItem('IS_SHOW1'),
      editPasswordDialogShow: false,
      editPassword: {
        old: '',
        new: '',
        newAgain: '',
        userId: ''
      },
      editPasswordRules: {
        old: [
          { required: true, message: '请输入旧的密码', trigger: ['blur', 'change'] },
          {
            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
            message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8-30位'
          }
        ],
        new: [
          { required: true, message: '请输入新的密码', trigger: ['blur', 'change'] },
          {
            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
            message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8-30位'
          }
        ],
        newAgain: [{ required: true, validator: reusrPassword, message: '两次密码输入不一致', trigger: ['blur', 'change'] }]
      },
      USR_STATUS: {
        Y: '可用',
        N: '不可用'
      },
      distribute: {
        Y: '是',
        N: '否'
      },
      listData: [{ isDistribute: 'Y', cCName: '是' }, { isDistribute: 'N', cCName: '否' }],
      flt: {
        usrCode: ''
      },
      userdepartmentList: [],

      isEditMode: true,
      show: true,
      operate: '',
      showDialog: false,
      showSeeDialog: false,

      currentRow: {},
      currentFltInfo: {},

      roleStatus: [],
      treeHeight: 0,
      //选中行数据
      selectData: [],

      data2: [],

      options: [],

      defaultProps: {
        children: 'children',
        label: 'dptName'
      },
      maxHeight: -1,
      dptId: '',
      dptName: ''
    }
  },
  computed: {
    // organization() {
    //   return this.data2.map( item => {
    //     item['dptName']  = item.dptName
    //     return item
    //   })
    // }
  },
  methods: {
    clickEventDom(item) {
      console.log(item)
      if (item.mdlCode === 'add') {
        this.addNew()
      } else if (item.mdlCode === 'edit') {
        this.edit()
      } else if (item.mdlCode === 'del') {
        this.del()
      } else if (item.mdlCode === 'restPassword') {
        this.resetpwd()
      } else if (item.mdlCode === 'editPassword') {
        if (Object.keys(this.currentRow).length === 0) {
          this.$message.error('至少选择一项')
          return
        }
        this.editPasswordDialogShow = true
        console.log(this.currentRow)
      }
    },
    //密码重置
    resetpwd() {
      var { uuid, version } = this.currentRow
      if (this.currentRow.length != 0) {
        resetSysUserpwd({ uuid, version }).then(res => {
          if (res.success == '1') {
            this.$alert('密码重置成功！重置为Abc12345', '提示', {
              confirmButtonText: '确定'
            })
            this.currentRow = ''
          } else {
            this.$alert('密码重置失败！请稍后再试', '提示', {
              confirmButtonText: '确定'
            })
            this.currentRow = ''
          }
          this.refreshList()
        })
      } else {
        this.$alert('请选择需要重置密码的数据！', '提示', {
          confirmButtonText: '确定'
        })
      }
    },
    // 重写的获取列表数据的方法
    getList(PageIndex, PageSize, updateTotal) {
      this.clearState()
      checkusersysdepartmentList({
        usrCode: this.flt.usrCode,
        dptId: this.dptId,
        PageIndex,
        PageSize
      }).then(res => {
        this.userdepartmentList = res.data
        updateTotal(res.total)
      })
      this.currentRow = ''
    },
    getListGroup(currentPage, pageSize, updateTotal) {
      this.clearState()
      checksysdepartmentList({
        dptCode: this.flt.dptCode,
        dptName: this.flt.dptName
      }).then(res => {
        this.data2 = res.data.content
        console.log(this.data2, 'asaaaaaaaaaaaaaaaaaaaaaaaaaa')
      })
    },
    addNew() {
      this.show = true
      this.operate = this.DIALOG_MODE.ADD
      this.isEditMode = true
      this.currentFltInfo = {
        // 糖厂名称
        usrDptsName: this.dptName,
        usrStatus: 'Y',
        // 角色
        usrRles: [],
        dptId: this.dptId,
        // 糖厂id
        usrDpts: this.dptId
      }
      this.showDialog = true
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.show = false
      this.operate = this.DIALOG_MODE.EDIT
      this.isEditMode = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      // 字符串转数组
      if (this.currentFltInfo.usrRles) {
        this.currentFltInfo.usrRles = this.currentFltInfo.usrRles.split(',')
      }
      this.showDialog = true
    },
    view(row) {
      this.operate = this.DIALOG_MODE.VIEW
      this.isEditMode = false
      this.currentFltInfo = Object.assign({}, row)
      // 字符串转数组
      if (this.currentFltInfo.usrRles) {
        this.currentFltInfo.usrRles = this.currentFltInfo.usrRles.split(',')
      }
      this.showDialog = true
    },
    // 查看用户dialog
    see() {
      this.operate = this.DIALOG_MODE.SEE
      this.isEditMode1 = true
      this.showSeeDialog = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      this.showDialog = false
    },
    closeEdit() {
      (this.showDialog = false), (this.showSeeDialog = false), this.getList()
    },
    saveFltInfo(info) {
      switch (this.operate) {
      case this.DIALOG_MODE.ADD:
        addusersysdepartmentList(info).then(() => {
          this.$message({
            message: '新增成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      case this.DIALOG_MODE.EDIT:
        editusersysdepartment(info).then(() => {
          this.$message({
            message: '编辑成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      default:
        break
      }
    },
    rowClick(row) {
      this.currentRow = row
    },
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        let leta = {}
        leta['uuid'] = this.currentRow.uuid
        leta['version'] = this.currentRow.version
        delusersysdepartment(leta).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          this.refreshList()
        })
      })
    },
    clearState() {
      this.currentRow = {}
      this.currentFltInfo = {}
    },
    // 组织机构
    getzuzhi() {
      getzuzhiList().then(res => {
        this.data2 = res.data
      })
    },
    getdata() {
      this.getList(this.Pagination.currentPage, this.Pagination.pageSize, this.updatePaginationTotal)
    },
    // 树点击
    handleNodeClick(data) {
      this.dptId = data.dptId
      this.dptName = data.dptName
      console.log(data, '数点击')
      this.getdata()
    },
    // 获取角色列表
    getroles() {
      queryroles().then(res => {
        this.options = res.data.DXWCCYR
      })
    },
    // 修改密码
    doEditPassword() {
      editPassword({
        uuid: this.currentRow.uuid,
        old: this.editPassword.old,
        password: this.editPassword.new
      }).then(() => {
        this.$message.success('修改成功')
        this.editPasswordDialogShow = false
      })
    }
  },
  components: {
    VDialog,
    buttonName
  },
  mounted() {
    this.searchList()
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.innerA.offsetHeight
    }
    // this.getzuzhi()
    this.getListGroup()
    this.refreshList()
    // this.getroles()
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}

.app-containerA {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.formList {
  padding-left: 7px;
}

.btn {
  padding-left: 5px;
  padding-bottom: 5px;
}

.user {
  flex: 1;
  position: relative;
  box-sizing: border-box;
}

.block {
  padding-right: 15px;
  padding-bottom: 5px;
}

.flow-tree {
  overflow: auto;
  flex: 1;
  height: 60%;
  margin: 10px;
}

.table {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 96%;

  .inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.tableA {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;

  .innerA {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .el-pagination {
    height: 4rem;
    flex: 0 0 auto;
    margin: 1rem 0;
  }
}
</style>
